<template>
  <div id="map"></div>
</template>

<script lang='ts'>
import { onMounted, reactive, Ref, ref, toRefs } from "vue";
import echarts, { EChartOption } from "echarts";
import { option } from "./option";
import { mapapi } from "@/api/homeApi";
export default {
  setup() {
    onMounted(async () => {
      const mapdata = await mapapi();
      const myChart = echarts.init(
        document.getElementById("map") as HTMLDivElement
      );
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      option(mapdata.data).then((res) => {
        myChart.setOption(res, true);
        myChart.resize();
      });
    });
  },
};
</script>
<style lang="less" >
#map {
  height: 100%;
  width: 100%;
  div:first-child {
    width: 100% !important;
    height: 100% !important;
    canvas {
      width: 100% !important;
      height: 100% !important;
    }
  }
}
</style>